#Header
{
    position: fixed;
    top: 0;
    width:100%;
    overflow: hidden;
    background-color: #507e64;
    z-index: 10;
    color: #efe7db;
    height: 80px;
}

#Logo
{
    padding: 0;
    width: 119px;
    height: 80px;
    margin: auto 6% auto 4%;
    float: left;
    cursor: pointer;
    background-image: url('../images/logoJPetStore.png');
    background-size: cover;
}

#QuickLinks
{
    float: left;
    position: relative;
    width: 40%;
    top: 10%;
    height: 80%;
    margin: 0;
}

#QuickLinks>.link
{
    line-height: 64px;
    letter-spacing: 1px;
    height: 90%;
    margin: auto 6%;
    border: none;
    float: left;
    position: relative;
    cursor: pointer;
}

#QuickLinks>.link::before
{
    transition: width 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    content: '';
    position: absolute;
    top:0;
    right: 50%;
    width: 0;
    height: 100%;
    border-bottom: 3px solid #efe7db;
}

#QuickLinks>.link::after
{
    transition: width 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    content: '';
    position: absolute;
    top:0;
    left: 50%;
    width: 0;
    height: 100%;
    border-bottom: 3px solid #efe7db;
}

#QuickLinks>.link:hover::before, #QuickLinks>.link:hover::after
{
    width: 50%;
}

#bird
{
    margin-right: 0px;
}

#Search
{
    float: left;
    height: 80%;
    position: relative;
    overflow: hidden;
    width: 20%;
    top: 10%;
}

#inputSearch
{
    display: block;
    transition: width 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    float: right;
    right: 11%;
    color:#efe7db;
    border: none;
    border-bottom: 3px solid #efe7db;
    outline: none;
    background: transparent;
    position: relative;
    width: 60%;
    top: 20px;
    height: 24px;
}

#inputSearch::placeholder
{
    color: #e0e0e0;
    letter-spacing: 0.5px;
}

#inputSearch:focus
{
    width: 88%;
}

#searchResult
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    position: fixed;
    z-index: 15;
    background-color: #efe7db;
    border: none;
    width: 18%;
    opacity: 0;
    min-height: 100px;
    height: 100px;
    left: calc(49.8% + 119px);
    top: 72px;
    border-radius: 10px;
    color: #833d1e;
    box-shadow: 1px 1px 8px #507e64;
    display: none;
}

#searchIcon
{
    padding: 0px;
    position:absolute;
    top: 21px;
    right: 8px;
    float: right;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    border: 3px solid #efe7db;
    cursor: pointer;
}

#searchIcon::before
{
    position: absolute;
    content: '';
    transform: rotate(45deg);
    top:14px;
    left:9px;
    height: 3px;
    width: 12px;
    border-radius: 3px;
    background-color: #efe7db;
}

#searchProducts
{
    display: none;
}

#Menu
{
    float: right;
    width: 20%;
    height: 80%;
    position: relative;
    top: 10%;
}

.account
{
    height: 50%;
    width: 80px;
    position: relative;
    top: 25%;
    border-radius: 8px;
    border: 3px solid #efe7db;
    float: right;
    margin: auto 2.5%;
    text-align: center;
    line-height: 32px;
    cursor:pointer;
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.account:hover
{
    background-color: #efe7db;
    color: #507e64;
}

.hide
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    opacity: 0 !important;
    transform: translateY(0px);
}

.show
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    opacity: 1 !important;
    transform: translateY(-10px);
}

@keyframes showTips
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

.tipItem
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    animation: showTips 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    height: 30px;
    line-height: 30px;
    position: relative;
    left: 15px;
    cursor: pointer;
}

.tipItem:hover
{
    transform: translateX(10px);
}

.selected
{
    border-bottom: 3px solid #efe7db !important;
}

.hideHeader
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateY(-80px);
}

.showHeader
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateY(0px);
}

@keyframes showWindow
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@keyframes hideWindow
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

#floatWindow
{
    opacity: 0;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
}

.showFloatWindow
{
    animation: showWindow 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

.hideFloatWindow
{
    animation: hideWindow 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

#displayBlock
{
    position: absolute;
    top: 5%;
    left: 10%;
    width: 80%;
    height: 90%;
    border-radius: 2px;
    background-color: #efe7db;
    overflow-y: scroll;
    overscroll-behavior: contain;
    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

@keyframes showDisplayItem
{
    0%
    {
        transform: translateY(-20px);
        opacity: 0;
    }
    100%
    {
        transform: translateY(0);
        opacity: 1;
    }
}

.displayItem
{
    animation: showDisplayItem 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    opacity: 0;
}